<template>
  <div class="whitelist-resources-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onSearch="onSearch"
        @onAdd="onAdd('', 'add')"
      >
        <template slot="startPermissionBtn">
          <a-popconfirm
            :title="`是否启动白名单？`"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onStartWhite"
          >
            <a-button class="bgGreen" icon="play-circle">启动白名单</a-button>
          </a-popconfirm>
        </template>
        <template slot="allDeleteBtn">
          <a-popconfirm
            :title="`是否确认删除所勾选的白名单?`"
            v-if="selectedRowKeys.length > 0"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDeleteAll"
          >
            <a-button icon="delete" type="danger">批量删除</a-button>
          </a-popconfirm>
        </template>
      </c-table-search-form>

      <!-- 表格部分 -->
      <c-table
        showPagination
        rowSelection
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
        @onSelectChange="onSelectChange"
      >
        <!-- 表格自定义 -->
        <template slot="accessType" slot-scope="row">
          <a-tag 
          :color="$dealDic(loginType,row.tableRow,'tagColor')">
           {{$dealDic(loginType,row.tableRow,'label')}}
          </a-tag>
        </template>

        <!-- 表格操作自定义 -->
        <template slot="handle" slot-scope="row">
          
          <a @click="onEdit(row.tableRow, 'edit')"><a-icon type="edit" /> 编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDel([row.tableRow.id])"
          >
            <p slot="title">
              是否确认删除
              <span class="colorMain">{{ row.tableRow.resourceName }}</span>
              白名单资源？
            </p>
            <a type="link"><a-icon type="delete" /> 删除</a>
          </a-popconfirm>
          
        </template>
      </c-table>
      <!-- 新增/编辑弹窗 -->
      <a-modal
        width="30%"
        :title="currentBtnType == 'add' ? '新增白名单' : '编辑表名单'"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="onEditModelOk"
        @cancel="onEditModelCancel"
        :destroyOnClose="true"
        center
      >
        <c-form-model
          :datas="formEditData"
          v-model="form"
          :rules="rules"
          ref="formModels"
        ></c-form-model>
        <div class="drawer-footer-btn flex-center">
          <a-button class="margin-r10" @click="onEditModelCancel"
            >取消</a-button
          >
          <a-button
            type="primary"
            :loading="confirmLoading"
            @click="onEditModelOk"
            >确定</a-button
          >
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getWhitelistResource,
  deleteWhitelistResource,
  addWhitelistResource,
  updateWhitelistResource,
  refreshWhite
} from "@/api/mallSystem/whitelistResource";
import { loginType } from "@/dict/system";

export default {
  name: "WhitelistResources",
  components: {},
  data() {
    return {
      loginType,
      currentBtnType: "add",
      form: {
        accessType: 0,
        resourceName: "",
        url: ""
      },
      rules: {
        resourceName: [
          { required: true, message: "请输入资源名", trigger: "blur" }
        ],
        url: [{ required: true, message: "请输入资源URL", trigger: "change" }]
      },
      visible: false,
      confirmLoading: false,
      formEditData: [
        {
          label: "资源名",
          prop: "resourceName"
        },
        {
          label: "资源URL",
          prop: "url"
        },
        {
          label: "访问类型",
          prop: "accessType",
          type: "select",
          typeData: loginType
        }
      ],
      tableSearchForm: {
        searchKey: ""
      },
      tableSearchFormData: [
        {
          label: "输入白名单资源名关键字",
          prop: "searchKey",
          type: "search"
        },
        {
          prop: "addBtn",
          type: "addBtn"
        },
        {
          prop: "startPermissionBtn",
          type: "slot"
        },
        {
          prop: "allDeleteBtn",
          type: "slot"
        }
      ],
      tableColumns: [
        {
          title: "资源名",
          dataIndex: "resourceName",
          align: "center"
        },
        {
          title: "资源URL",
          dataIndex: "url",
          align: "center"
        },
        {
          title: "访问类型",
          dataIndex: "accessType",
          scopedSlots: { customRender: "accessType" },
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          scopedSlots: { customRender: "handle" },
          width: 160,
          align: "center"
        }
      ],
      deleteIdArr: [],
      selectedRowKeys: [],
      selectedRows: [],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onEditModelOk() {
      const that = this;
      let onFun;
      that.currentBtnType === "add"
        ? (onFun = addWhitelistResource)
        : (onFun = updateWhitelistResource);
      this.$refs.formModels.handleValidate().then(data => {
        data.resourceName = data.resourceName.trim();
        data.url = data.url.trim();
        that.confirmLoading = true;
        onFun([data])
          .then(res => {
            that.$message.success("操作成功");
            that.deleteIdArr = [];
            that.selectedRowKeys = [];
            that.selectedRows = [];
            that.onPageOnlod();
            that.confirmLoading = false;
            that.visible = false;
          })
          .catch(() => {
            this.confirmLoading = false;
          });
      });
    },
    onEditModelCancel() {
      this.visible = false;
    },
    onDeleteAll() {
      this.deleteIdArr = [];
      this.selectedRowKeys.map(item => {
        return this.deleteIdArr.push(item.id);
      });
      this.onDel([...new Set(this.deleteIdArr)]);
    },
    onDel(idArr) {
      deleteWhitelistResource(idArr).then(res => {
        this.$message.success("操作成功");
        this.selectedRowKeys = [];
        this.selectedRows = [];
        this.onPageOnlod();
      });
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    onSearch() {
      this.paginationDatas = {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      };
      this.onPageOnlod();
    },
    onPageOnlod() {
      this.loading = true;
      getWhitelistResource({
        resourceName: this.tableSearchForm.searchKey.trim(),
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onShowHiddenOperation() {},
    onEdit(row) {
      for (const key in this.form) {
        if (row[key]) this.form[key] = row[key];
        this.form.id = row.id;
      }
      this.currentBtnType = "edit";
      this.visible = true;
    },
    onStartWhite() {
      refreshWhite().then(() => {
        this.$message.success("启动成功");
        this.onPageOnlod();
      });
    },
    onAdd() {
      this.form = {
        accessType: 0,
        resourceName: "",
        url: ""
      };
      this.currentBtnType = "add";
      this.visible = true;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
